/* Reset default margins and padding for full-width layout */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;   /* Prevents any horizontal scroll/white gap */
  font-family: "Quicksand", sans-serif;
}

/* Header Container */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 110px;
  background-color: #fff;
}

/* Logo */
.logo-img {
  height: 90px;
  width: auto;
  margin-top: 20px;
}

/* Nav Menu */
.nav-menu {
  margin-left: auto;
}

.nav-menu ul {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 45px;
  margin: 0;
  padding: 0;
  position: relative;
}

.nav-menu ul li a {
  text-decoration: none;
  color: #333;
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  font-size: 1.06em;
  transition: color 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
}

/* Underline effect - now thinner */
.nav-menu ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;                    /* thinner underline */
  background-color: #143a74;
  transform: translateX(-50%);
  transition: width 0.5s ease;
}

/* Zoom and underline on hover */
.nav-menu ul li a:hover {
  color: #143a74;
  transform: scale(1.05);
}

.nav-menu ul li a:hover::after {
  width: 100%;
}

/* Hide mobile button on desktop */
.menu-item {
  display: none;
}

/* Circular Hamburger Button */
    .hamburger-btn {
      width: 50px;
      height: 50px;
      background-color: #1f2937;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      z-index: 50;
    }

    .hamburger-btn:hover {
      background-color: #374151;
    }

    /* Lines */
    .hamburger-icon {
      width: 24px;
      height: 24px;
      position: relative;
      transition: all 0.4s ease;
    }

    .line {
      position: absolute;
      width: 24px;
      height: 3px;
      background-color: white;
      border-radius: 3px;
      transition: all 0.4s ease;
    }

    /* Line 1 (top) */
    .line1 { top: 4px; }
    /* Line 2 (middle) */
    .line2 { top: 10.5px; }
    /* Line 3 (bottom) */
    .line3 { top: 17px; }

    /* When active → becomes X */
    .hamburger-btn.active .line1 {
      top: 10.5px;
      transform: rotate(45deg);
    }
    .hamburger-btn.active .line2 {
      opacity: 0;
    }
    .hamburger-btn.active .line3 {
      top: 10.5px;
      transform: rotate(-45deg);
    }

    /* Mobile Menu */
    .mobile-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: #111827;
      transform: translateX(-100%);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 40;
      padding-top: 90px;
    }

    .mobile-menu.open {
      transform: translateX(0);
    }

    .mobile-menu a {
      display: block;
      padding: 20px 30px;
      color: white;
      font-size: 1.3rem;
      font-weight: 500;
      text-decoration: none;
      border-bottom: 1px solid #374151;
      transition: background 0.2s;
    }

    .mobile-menu a:hover {
      background-color: #1f2937;
    }

    /* Overlay */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.65);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 30;
    }

    .overlay.show {
      opacity: 1;
      visibility: visible;
    }
/* ====================== HERO VIDEO SECTION ====================== */

.hero-video {
  position: relative;
  width: 100%;
  min-width: 100%;                  /* Extra safety for full width */
  height: calc(100vh - 110px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  left: 0;
  right: 0;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                /* This is key for no gaps */
  z-index: 1;
}

/* Dark overlay to make text readable */
.hero-video::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.12);   /* Adjust darkness if needed */
  z-index: 2;
}

/* Hero Text Container */
.hero-overlay {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 3;
  width: 90%;
  max-width: 900px;
}

.hero-overlay h1 {
  font-family: "Playfair Display", serif;
  font-size: 3.2rem;
  line-height: 1.2;
  margin-bottom: 30px;
  font-weight: 700;
}

.hero-line1 {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 1em;
  letter-spacing: 2.2px;
  font-weight: 600;
  color: white;
  opacity: 0.98;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero-line2 {
  display: block;
  font-family: "Corinthia", cursive;
  font-size: .7em;
  letter-spacing: 1.5px;
  color: white;
  margin-top: 10px;
  opacity: 0.98;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Primary Button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: transparent;
  color: white;
  padding: 16px 36px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  font-size: 1.1rem;
  transition: all 0.35s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  margin-top: 2px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.btn-primary i {
  font-size: 1.1em;
  transition: all 0.35s ease;
  opacity: 0.9;
}

.btn-primary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: white;
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.btn-primary:hover i {
  opacity: 1;
  transform: translateX(6px);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  z-index: -1;
}

.btn-primary:active::before {
  width: 300px;
  height: 300px;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 768px) {
  .hero-overlay h1 {
    font-size: 2.4rem;
  }
  
  .hero-line1 {
    font-size: 2.1rem;
  }
  
  .btn-primary {
    padding: 14px 32px;
    font-size: 1.05em;
  }
}

@media (max-width: 480px) {
  .hero-overlay h1 {
    font-size: 2rem;
  }
  
  .hero-line1 {
    font-size: 1.8rem;
  }
}

/* ====================== TEXT SECTIONS ====================== */
.after-video,
.intro-text,
.destinations-section {
  text-align: center;
  background: white;
}

.after-video {
  padding: 80px 0;
}

.after-video h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  color: #143a74;
  margin-bottom: 20px;
}

.after-video p {
  font-size: 1.2rem;
  color: #444;
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.8;
}

.features {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.feature {
  flex: 1;
  min-width: 250px;
  padding: 20px;
}

.feature h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: #143a74;
  margin-bottom: 10px;
}

.feature p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* ====================== INTRO TEXT SECTION ====================== */

.intro-text {
  padding: 60px 20px 40px;
  margin-top: 0;
}

.intro-heading {
  margin-top: 0;
}

.safari-line {
  font-family: "Corinthia", cursive;
  font-size: 2.8rem;
  font-weight: 700;
  color: black;
  margin: 0 auto 20px;
  line-height: 1.2;
  max-width: 900px;
  letter-spacing: 1.2px;
}

.weve-line {
  font-family: "Corinthia", cursive;
  font-size: 2.8rem;
  font-weight: 700;
  color: black;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 1.2px;
}

/* Move "We’ve got Yours" slightly higher on mobile only */
@media (max-width: 768px) {
  .weve-line {
    margin-top: -8px;
  }
}

@media (max-width: 480px) {
  .weve-line {
    margin-top: -12px;
  }
}

.intro-body {
  font-size: 1rem;
  font-family: "Quicksand", sans-serif;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
  color: #444;
}

/* Mobile spacing after video */
@media (max-width: 768px) {
  .intro-text {
    padding: 70px 15px 50px;
  }
}

@media (max-width: 480px) {
  .intro-text {
    padding: 80px 15px 40px;
  }
}

.destinations-section {
  padding: 80px 20px;
  margin-top: -20px;
}

.section-title {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #000;
  margin-bottom: 20px;
  line-height: 1.2;
}

.section-subtitle {
  font-family: "Quicksand", sans-serif;
  font-size: 1.125rem;
  color: #444;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.aesthetic-lines-horizontal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
}

.line {
  display: block;
  height: 2px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
  border-radius: 2px;
}

.line-long {
  width: 160px;
}

.line:not(.line-long) {
  width: 80px;
}

/* ====================== CARDS SECTION ====================== */
.destinations-cards {
  padding: 80px 20px;
  background: white;
  margin-top: -105px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}

.cards-grid {
  align-items: start;
}
/* ====================== FLIP CARDS ====================== */

.flip-card {
  align-self: start;
  perspective: 1200px;
  height: 460px;
  width: 100%;
  min-height: 460px;
  max-height: 460px;
  transform-origin: center center;
  transform-style: preserve-3d;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.55s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
  transform-origin: center center;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box;
}

.flip-card-front {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.flip-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.74)), var(--back-image, #000000);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 30px;
  text-align: left;
  overflow: hidden;
  pointer-events: auto;
  z-index: 2;
}

.flip-card-back .card-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* increase 0.6 for more darkness */
}
/* Image & Overlay styles */
.card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease;
  z-index: 0;
}

.card-overlay {
  position: relative;
  z-index: 1;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  color: white;
  padding: 50px 20px 30px;
  text-align: center;
  transition: all 0.4s ease;
}

.card-overlay h3 {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Back content */
.back-content {
  width: 100%;
  max-width: 320px;
  position: relative;
  z-index: 2;
  max-height: 100%;
  overflow: hidden;
}

.back-heading {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  margin-bottom: 20px;
  color: white;
}

.back-list {
  list-style: none;
  margin: 0 0 25px 0;
  padding: 0 0 0 12px;
}

.back-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  line-height: 1.4;
  color: white;
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  transition: all 0.3s ease;
}

.back-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.back-list li:hover {
  color: #72a2e9; /* Your desired hover text color */
  transform: translateY(-4px);
}

.btn-small {
  display: inline-block;
  color: white;
  padding: 8px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid #000000;
}

.btn-small:hover {
  background-color: #000000;
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }

  .flip-card {
    height: 400px;
  }
}

/* TESTIMONIALS SECTION */
.testimonials-section {
  padding: 40px 0;
  background: #f9f7f3;
  text-align: center;
}

.testimonials-section .section-heading {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  color: #1a3c34;
  margin-bottom: 16px;
}

.testimonials-slider-section .section-heading1 {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #000;
  margin: 0 auto 20px;
  line-height: 1.3;
  max-width: 900px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.testimonials-slider-section .section-subtitle1 {
  font-family: "Corinthia", cursive;
  font-size: 2.2rem;
  font-weight: 700;
  color: black;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 1.2px;
}

.testimonials-section .section-subtitle {
  font-size: 18px;
  color: #5d5d5d;
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.testimonial-card {
  background: white;
  padding: 40px 30px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
  border: 1px solid #eee;
}

.testimonial-card:hover {
  transform: translateY(4px);
}

.testimonial-quote p {
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 20px;
  position: relative;
}

.testimonial-quote p::before,
.testimonial-quote p::after {
  content: '"';
  font-size: 60px;
  color: black;
  font-family: 'Georgia', serif;
  position: absolute;
  opacity: 0.2;
}

.testimonial-quote p::before {
  top: -20px;
  left: -10px;
}

.testimonial-quote p::after {
  content: '"';
  bottom: -40px;
  right: -10px;
}

.testimonial-author {
  font-weight: 600;
  color: #1a3c34;
  margin-bottom: 8px;
}

.testimonial-author em {
  font-weight: 400;
  color: #888;
  font-size: 14px;
}

.testimonial-stars {
  color: #f4c542;
  font-size: 18px;
  letter-spacing: 2px;
  margin-top: 12px;
}

.testimonial-badge {
  margin: 60px auto 40px;
  max-width: 400px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

.testimonial-badge p {
  font-size: 16px;
  color: #1a3c34;
  margin-bottom: 8px;
}

.badge-stars {
  color: #f4c542;
  font-weight: bold;
  font-size: 18px;
}

.badge-stars span {
  color: #888;
  font-weight: normal;
  font-size: 15px;
  margin-left: 8px;
}

.badge-logo {
  height: 24px;
  margin-top: 10px;
}

.testimonials-cta {
  margin-top: 20px;
}

/* TESTIMONIALS SLIDER */
.testimonials-slider-section {
  padding: 40px 0;
  background: white;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.testimonials-slider-section .section-heading {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  color: #1a3c34;
  margin-bottom: 16px;
}

.testimonials-slider-section .section-subtitle {
  font-size: 18px;
  color: #5d5d5d;
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.testimonials-slider {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
}

.slider-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.testimonial-slide {
  min-width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

.testimonial-card {
  background: white;
  padding: 50px 40px;
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(245, 245, 245, 0.1);
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  border: 1px solid #d3d3d3;
}

.testimonial-quote p {
  font-style: italic;
  font-size: 19px;
  line-height: 1.75;
  color: #333;
  margin-bottom: 24px;
  position: relative;
}

.testimonial-quote p::before,
.testimonial-quote p::after {
  content: '"';
  font-size: 80px;
  color: rgb(154, 198, 216);
  font-family: 'Georgia', serif;
  position: absolute;
  opacity: 0.15;
  line-height: 1;
}

.testimonial-quote p::before {
  top: -30px;
  left: -20px;
}

.testimonial-quote p::after {
  content: '"';
  bottom: -50px;
  right: -20px;
}

.testimonial-author {
  font-weight: 600;
  color: #1a3c34;
  font-size: 17px;
  margin-bottom: 8px;
}

.testimonial-author em {
  font-weight: 400;
  color: #888;
  font-size: 15px;
}

.testimonial-stars {
  color: #f4c542;
  font-size: 20px;
  letter-spacing: 3px;
  margin-top: 16px;
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a8a8a8;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active,
.dot:hover {
  background: rgb(108, 182, 211);
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .testimonial-card {
    padding: 30px 25px;
  }
}

/* Mobile adjustments for headings */
@media (max-width: 768px) {
  .testimonials-slider-section .section-heading1 {
    font-size: 1.3rem; /* Reduced from 2.2rem */
    max-width: 100%;   /* Ensures it fits smaller screens */
  }

  .testimonials-slider-section .section-subtitle1 {
    font-size: 1.3rem; /* Adjust this to fit your preference */
    margin-bottom: 30px; /* Optional: reduce bottom margin for tighter mobile look */
  }
}

.testimonials-slider {
    position: relative;
    overflow: hidden;
    z-index: 2;
    transition: height 0.5s ease;
}

.slider-prev, .slider-next {
   background: transparent;
   color: #555;
   border: 1px solid #aaa;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: border-color 0.2s, transform 0.2s;
}

.slider-prev:hover, .slider-next:hover {
    border-color: #143a74;
    transform: scale(1.08);
}

.slider-prev:active, .slider-next:active {
    transform: scale(0.95);
}

.testimonials-slider-section .lodgeso-nav {
  margin-top: 24px;
  margin-bottom: 24px;
}

.slider-track {
  display: flex;
  width: 100%;
}

.testimonial-slide {
  min-width: 100%;
}

.testimonial-badge {
  margin-top: 0;
  margin-bottom: 40px;
}

.our-impact-section {
  padding: 10px 0;
  background: rgb(214, 210, 210);
  text-align: center;
}

.impact-heading {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #000;
  margin-bottom: 10px;
}

.impact-subtitle {
  font-family: "Quicksand", sans-serif;
  font-size: 1.125rem;
  color: #2b2b2b;
  max-width: 700px;
  margin: 0 auto 60px;
  line-height: 1.7;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.impact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  transition: transform 0.3s ease;
}

.impact-item:hover {
  transform: translateY(-6px);
}

.impact-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
}

.impact-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(36%) sepia(67%) saturate(440%) hue-rotate(122deg) brightness(93%) contrast(90%);
}

.impact-number {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: rgb(80, 80, 185);
  margin-bottom: 8px;
  line-height: 1;
}

.impact-text {
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
  color: #222222;
  line-height: 1.5;
  max-width: 200px;
}

.impact-wrapper {
  position: relative;
  padding: 100px 0;
}

.impact-bird {
  position: absolute;
  top: 50px;
  left: 80px;
  width: 300px;
  height: auto;
  z-index: 1;
  opacity: .15;
}

.impact-lion {
  position: absolute;
  bottom: 10px;
  right: 0px;
  width: 400px;
  height: auto;
  z-index: 1;
  opacity: .2;
}

@media (max-width: 768px) {
  .impact-bird,
  .impact-lion {
    display: block;           /* Show on mobile */
    opacity: 0.12;            /* Slightly more transparent on small screens */
  }
  
  /* Make images smaller on mobile so they don't overwhelm */
  .impact-bird {
    width: 180px;
    top: 200px;
    left: 20px;
    width: 200px;
    height: auto;
  }
  
  .impact-lion {
    width: 220px;
    bottom: 20px;
    right: 0px;             /* Adjusted for mobile */
    width: 300px;
    height: auto;
  }
}

.impact-grid {
  position: relative;
  z-index: 2;
}

.impact-images {
  position: relative;
  z-index: 1;
  margin-top: -120px;
  padding-top: 80px;
}

/* ====================== WHY TRAVEL WITH US ====================== */
.why-us-section {
  padding: 100px 20px;
  background: #ffffff;
  text-align: center;
}

.why-us-section .section-heading {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #000;
  margin-bottom: 16px;
  position: relative;
}

.why-us-section .section-heading::after {
  content: '';
  display: block;
  width: 80px;
  height: 2px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
  margin: 20px auto;
  border-radius: 1px;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 60px auto 50px;
}

.why-card {
  background: #fdfdfd;
  padding: 32px 24px;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.06);
  transition: all 0.4s ease;
  border: 1px solid #f0f0f0;
}

.why-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  border-color: #143a74;
}

.why-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: #f8f8f8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid #eee;
}

.why-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.why-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: #000000;
  margin-bottom: 12px;
  font-weight: 700;
}

.why-card p {
  font-size: 1rem;
  font-family: "Quicksand", sans-serif;
  color: #2c2c2c;
  line-height: 1.7;
  margin: 0;
}

.why-card p strong {
  color: #143a74;
}

.why-cta {
  margin-top: 20px;
}

.why-cta .btn-primary {
  background: #143a74;
  color: white;
  border: none;
  padding: 16px 36px;
  font-weight: 600;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(46,139,87,0.3);
  transition: all 0.3s ease;
}

.why-cta .btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(46,139,87,0.4);
}

@media (max-width: 768px) {
  .why-us-section {
    padding: 80px 15px;
  }
  .why-us-section .section-heading {
    font-size: 2.4rem;
  }
  .why-us-grid {
    gap: 30px;
  }
  .why-card {
    padding: 28px 20px;
  }
}

/* ====================== LODGES — LEFT TEXT + RIGHT HORIZONTAL SCROLL ====================== */

.lodges-horizontal-section {
  padding: 100px 20px;
  background: #ffffff;
}

/* Move Lodges Section Up */
.lodges-horizontal-section {
  margin-top: -80px;     /* This pulls the whole section upward */
  padding-top: 60px;     /* Keeps good internal spacing */
}

.lodges-horizontal {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  max-width: 1400px;
  margin: 0 auto;
}

.lodges-text {
  flex: 0 0 32%;
  min-width: 280px;
  position: sticky;
  top: 120px;
  align-self: flex-start;
}

.lodges-text .section-heading {
  font-size: 2.6rem;
  margin-bottom: 20px;
}

.lodges-scroll-container {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;             /* horizontal only — never scroll this box vertically */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #161616 #e5e5e5;
  padding-bottom: 20px;
  border-radius: 16px;
}

/* Custom scrollbar styling */
.lodges-scroll-container::-webkit-scrollbar {
  height: 8px;
}

.lodges-scroll-container::-webkit-scrollbar-track {
  background: #e5e5e5;
  border-radius: 10px;
}

.lodges-scroll-container::-webkit-scrollbar-thumb {
  background: #143a74;
  border-radius: 10px;
}

.lodges-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #1e5a9e;
}

.lodges-track {
  display: flex;
  gap: 28px;
  padding: 10px 10px 30px 10px;   /* extra bottom padding for scrollbar */
  scroll-snap-type: x mandatory;
  width: max-content;
}

.lodge-card {
  flex: 0 0 320px;                    /* Fixed card width */
  min-width: 320px;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.lodge-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.lodge-image {
  height: 240px;
  overflow: hidden;
}

.lodge-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.lodge-card:hover .lodge-image img {
  transform: scale(1.05);
}

.lodge-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  margin: 24px 24px 8px;
  font-weight: 600;
  color: #000;
}

.lodge-card p {
  font-size: 15px;
  color: #666;
  margin: 0 24px 20px;
  flex: 1;
}

.btn-small1 {
  margin: 0 24px 24px;
  align-self: flex-start;
  display: inline-block;
  color: black;
  padding: 8px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid #000000;
}

.btn-small1:hover {
  background-color: #000000;
  color: white;
  transform: translateY(-1px);
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1024px) {
  .lodges-horizontal {
    flex-direction: column;
    gap: 50px;
  }
  
  .lodges-text {
    position: static;
    flex: none;
    text-align: center;
    width: 100%;
  }
  
  .lodge-card {
    flex: 0 0 300px;
    min-width: 300px;
  }
}

@media (max-width: 768px) {
  .lodges-scroll-container {
    padding-bottom: 15px;
  }
  
  .lodge-card {
    flex: 0 0 280px;
    min-width: 280px;
  }
  
  .lodge-image {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .lodge-card {
    flex: 0 0 260px;
    min-width: 260px;
  }
}

/* ====================== LIFE-CHANGING MOMENTS HERO ====================== */

.experiences-hero {
  padding: 120px 20px 60px;
  background: linear-gradient(to bottom, #ffffff 0%, #f5f2ed 100%);
  position: relative;
  overflow: hidden;
}

.experiences-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 80px;
}

/* LEFT SIDE - IMAGES */
.moment-images {
  flex: 1;
  position: relative;
  height: 620px;
  min-width: 45%;
}

/* Image containers */
.moment-image-container {
  position: absolute;
  overflow: hidden;
}

.moment-image-1 {
  top: 0;
  left: 30%;
  width: 50%;
  height: 60%;
  z-index: 1;
}

.moment-image-2 {
  bottom: 33px;
  right: 0;
  width: 58%;
  height: 45%;
  z-index: 2;
}

.moment-image-3 {
  top: 40%;
  left: 10px;
  width: 50%;
  height: 45%;
  z-index: 3;
}

.moment-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

/* RIGHT SIDE - TEXT */
.moment-text-container {
  flex: 1;
  max-width: 520px;
  padding-left: 20px;
  padding-top: -100px
}

.moment-title {
  font-family: 'Playfair Display', serif;
  font-size: 3.2rem;
  line-height: 1.15;
  color: #444;
  margin-bottom: 16px;
}

.moment-subtitle {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.35rem;
  color: #143a74;
  margin-bottom: 28px;
  font-weight: 500;
}

.moment-body {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.08rem;
  line-height: 1.75;
  color: #444;
  margin-bottom: 40px;
}

.btn-moment {
  display: inline-block;
  color: black;
  padding: 8px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid #000000;
}

.btn-moment:hover {
  background-color: #000000;
  color: white;
  transform: translateY(-1px);
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1024px) {
  .experiences-hero-inner {
    gap: 50px;
  }
  
  .moment-images {
    height: 520px;
  }
  
  .moment-title {
    font-size: 2.8rem;
  }
}

@media (max-width: 768px) {
  .experiences-hero {
    margin-top: -140px;     /* ← ONLY THIS WAS CHANGED - moved much higher */
    padding-top: 20px;
    padding-bottom: 80px;
  }

  .experiences-hero-inner {
    flex-direction: column;
    gap: 50px;
    text-align: center;
  }
  
  .moment-text-container {
    padding-left: 0;
    max-width: 100%;
  }
  
  .moment-images {
    width: 100%;
    height: 480px;
    margin: 0 auto;
  }
  
  /* Center the images on mobile */
  .moment-image-1 { width: 65%; left: 0; }
  .moment-image-2 { width: 55%; right: 0; bottom: 30px; }
  .moment-image-3 { width: 35%; left: 32%; top: 42%; }
}

/* SITE FOOTER */
.site-footer {
  background: #19314e;
  color: #e0e0e0;
  padding: 80px 0 30px;
  font-size: 15px;
  line-height: 1.7;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 50px;
  align-items: start;
}

.footer-col h3.footer-heading {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: white;
  margin: 0 0 20px;
  position: relative;
}

.footer-col h3.footer-heading::after {
  content: '';
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
  display: block;
  margin-top: 10px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #b8d8d0;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;
}

.footer-links a:hover {
  color: white;
}

.footer-brand .footer-logo {
  margin-bottom: 20px;
}



.footer-tagline {
  font-size: 15px;
  color: #b8d8d0;
  margin: 0 0 24px;
  line-height: 1.6;
}

.footer-tagline strong {
  color: white;
  font-style: italic;
}

.footer-awards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-awards img {
  height: 60px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

.footer-newsletter .newsletter-text {
  font-size: 14px;
  color: #b8d8d0;
  margin-bottom: 16px;
}

.newsletter-form {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.newsletter-form input {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  border: none;
  border-radius: 30px;
  font-size: 14px;
  background: rgba(255,255,255,0.15);
  color: white;
  backdrop-filter: blur(5px);
}

.newsletter-form input::placeholder {
  color: #ccc;
}

.newsletter-form input:focus {
  outline: 2px solid #2e8b57;
}

.btn-newsletter {
  background: #2e8b57;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-newsletter:hover {
  background: #1a5f3a;
  transform: translateY(-2px);
}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.footer-social a {
  color: #b8d8d0;
  font-size: 18px;
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: white;
}

.whatsapp-cta {
  background: #25D366;
  color: white !important;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.whatsapp-cta:hover {
  background: #1ebe57;
  transform: translateY(-2px);
}

.footer-impact {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 30px;
  font-size: 15px;
}

.impact-item {
  text-align: center;
  min-width: 140px;
}

.impact-item strong {
  display: block;
  font-size: 24px;
  color: #2e8b57;
  font-weight: 700;
  margin-bottom: 4px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
  color: #999;
}

.footer-copyright {
  font-weight: 500;
  margin-left: 5%;
}

.footer-copyright strong {
  color: white;
}

.footer-certifications {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-right: 5%;
}

.footer-certifications img {
  height: 40px;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer-col.footer-brand {
    grid-column: 1 / -1;
  }
}

/* Mobile footer sizing/layout is owned by the "FOOTER MOBILE REDESIGN"
   @media (max-width: 768px) block in styles.css. Duplicate rules were
   removed here so every page renders the same mobile footer. */

/* ====================== YOUR REQUESTED FOOTER CHANGES ====================== */

/* 1. 5px margin on the sides of the entire footer content (desktop only —
   mobile margin is owned by the "FOOTER MOBILE REDESIGN" block in styles.css) */
@media (min-width: 769px) {
  .site-footer .container {
    margin-left: 35px;
    margin-right: 15px;
  }
}

/* 2. Reduce size of Top Nature logo + make it perfectly circular */
.footer-logo-circle {
  width: 85px;                  /* smaller size */
  height: 85px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  margin-bottom: 20px;
}

.footer-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

/* 3. Partners section - "Some of our top clients..." + horizontal circular logos */
/* Sizing below is desktop-only — mobile layout/sizing is owned by the
   "FOOTER MOBILE REDESIGN" @media (max-width: 768px) block in styles.css. */
@media (min-width: 769px) {
  .footer-partners {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }

  .partners-text {
    font-size: 15px;
    color: #b8d8d0;
    white-space: nowrap;
    font-weight: 500;
  }

  .partners-logos {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .logo-wrapper {
    width: 68px;                  /* reasonable size */
    height: 68px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
  }
}

.logo-wrapper:hover {
  transform: scale(1.08);
}

.partner-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.logo-nasa {
  width: 50px !important;
  height: 50px !important;
}

.logo-samsung {
  width: 50px !important;
  height: 50px !important;
}

.logo-microsoft {
  width: 70px !important;
  height: 70px !important;
}

.logo-airbnb {
  width: 55px !important;
  height: 55px !important;
}

/* ====================== MOVED AWARDS TEXT BESIDE LOGO ====================== */

.footer-brand-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.footer-awards {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.footer-award-img {
  height: 52px;
  width: auto;
  object-fit: contain;
}

.award-text {
  font-size: 14px;
  line-height: 1.4;
  color: #b8d8d0;
}

/* Brand name styling */
.brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.brand-subtitle {
  font-size: 15px;
  color: #b8d8d0;
  font-weight: 500;
}

/* Center logo + awards text on mobile only */
@media (max-width: 600px) {
  .footer-brand {
    text-align: center;
  }

  .footer-brand-inner {
    justify-content: center;
  }

  .footer-awards {
    justify-content: center;
  }
}

.safari-finder-btn {
  position: fixed;
  right: -65px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1400;
  pointer-events: auto;
}

.safari-finder-btn .safari-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  background: #25477a;
  color: rgb(255, 255, 255);
  padding: 14px 20px;
  border-radius: 0px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  text-decoration: none;
  font-weight: 400;
  font-family: "Quicksand", sans-serif;
  font-size: 15px;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.safari-finder-btn .safari-icon {
  font-size: 18px;
  line-height: 1;
}

.safari-finder-btn .safari-btn:hover {
  transform: rotate(-90deg) translateX(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

@media (max-width: 768px) {
  .safari-finder-btn {
    right: 16px;
    top: auto;
    bottom: 18px;
    transform: none;
    display: flex;
    justify-content: center;
    width: auto;
  }
  .safari-finder-btn .safari-btn {
    transform: none;
    padding: 12px 16px;
    border-radius: 30px;
    font-size: 14px;
  }
}

/* Hide the floating "Find Your Safari" button on phones and tablets */
@media (max-width: 1024px) {
  .safari-finder-btn {
    display: none !important;
  }
}

/* Reduce newsletter input & button size on mobile */
@media (max-width: 600px) {
  .newsletter-form input {
    padding: 10px 14px;
    font-size: 14px;
    min-width: auto;
  }

  .btn-newsletter {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* ====================== MOVE AWARDS TEXT BESIDE LOGO ====================== */

.footer-brand-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-awards {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.footer-award-img {
  height: 48px;
  width: auto;
}

.award-text {
  font-size: 14.5px;
  line-height: 1.35;
  color: #b8d8d0;
}

/* Brand name styling */
.brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 27px;
  font-weight: 700;
  color: white;
  line-height: 1.1;
}

.brand-subtitle {
  font-size: 15.5px;
  color: #b8d8d0;
}

/* Newsletter form mobile width/layout is owned by the "FOOTER MOBILE
   REDESIGN" @media (max-width: 768px) block in styles.css. */

/* Fix logos inside circular wrappers */
.partner-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  box-sizing: border-box;
}

/* Optional: make NASA and JP Morgan slightly larger if needed */
.logo-wrapper--nasa .partner-logo {
  object-position: center;
}

.logo-wrapper--jpmorgan .partner-logo {
  object-position: center;
}

/* ====================== DESTINATIONS HERO ====================== */
.destinations-hero-image {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Centered Text ── */
.hero-overlay-text {
  position: relative;
  z-index: 10;
  text-align: center;
  transform: translateY(-250px);
}

.hero-overlay-text h1 {
  line-height: 1.1;
  margin-bottom: -25px;
}

.hero-overlay-text .line1 {
  display: inline;
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  font-weight: 500;
  color: #111;
}

.hero-overlay-text .line2 {
  display: inline;
  font-family: "Corinthia", cursive;
  font-size: 4rem;
  color: #143a74;
}

.hero-tagline {
  font-family: "Quicksand", sans-serif;
  font-size: 1.2rem;
  color: #555;
  letter-spacing: 1px;
}

/* ── Image Container ── */
.image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Base image style ── */
.custom-image {
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
}

/* ── Individual image sizes and positions ── */
.img-1 {
  width: 200px;
  height: 330px;
  bottom: 14%;
  left: 5%;
}

.img-2 {
  width: 200px;
  height: 360px;
  bottom: 13%;
  left: 25%;
}

.img-3 {
  width: 200px;
  height: 260px;
  bottom: 17%;
  right: 5%;
}

.img-4 {
  width: 290px;
  height: 400px;
  bottom: 17%;
  right: 30%;
}

.img-5 {
  width: 100px;
  height: 180px;
  top: 1%;
  right: 15%;
  transform: translateX(-50%);
}

@media (max-width: 768px) {

  /* 🔥 Hide original scattered images ONLY on mobile */
  .img-1, .img-2, .img-3, .img-4 {
    display: none;
  }

  /* Slideshow container */
  .mobile-slideshow {
    position: relative;
    width: 90%;
    height: 350px;
    margin: 20px auto 0; /* centers below text */
    border-radius: 12px;
    overflow: hidden;
    left: -20%;
    bottom: -50px;
  }

  /* Slides */
  .mobile-slideshow .slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;

    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .mobile-slideshow .slide.active-slide {
    opacity: 1;
  }
}

/* ====================== DESTINATIONS CONTENT SECTION ====================== */

.destinations-content {
  position: relative;
  padding: 100px 50px; /* 🔥 50px side margin like you wanted */
  overflow: hidden;
  background-color: #e4e4e4;
}

/* Center heading */
.section-title {
  text-align: center;
  margin-bottom: 50px;
  font-family: "Playfair Display", serif;
  font-size: 2.8rem;
  color: #111;
}

/* Text block */
.content-wrapper {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto; /* 🔥 centers text */
  font-family: "Quicksand", sans-serif;
  font-size: 1.2rem;
  color: #222222;
  letter-spacing: 1px;
}

/* Background images base */
.bg-image {
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  z-index: 1;
  opacity: 0.9;
}

/* 🔥 TOP RIGHT IMAGE */
.bg-img-3 {
  width: 220px;
  height: 220px;
  top: 40px;
  right: 50px;
}

/* 🔥 BOTTOM LEFT IMAGE */
.bg-img-1 {
  width: 320px;
  height: 580px;
  bottom: 40px;
  left: 50px;
  opacity: 0.6;
}

/* Soft overlay for readability */
.bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}

/* ====================== MOBILE ====================== */

@media (max-width: 768px) {

  .destinations-content {
    padding: 60px 20px;
  }

  .section-title {
    font-size: 2rem;
    margin-bottom: 30px;
  }

  .content-wrapper {
    max-width: 100%;
  }

  /* Resize and reposition images */
  .bg-image {
    width: 180px;
    height: 180px;
  }

  /* top-right stays */
  .bg-img-3 {
    top: 20px;
    right: 10px;
    opacity: 0.5;
  }

  /* bottom-left stays */
  .bg-img-1 {
    bottom: 320px;
    left: 30px;
    width: 240px;
    height: 450px;
  }
}

/* ========================================
   DESTINATIONS GRID - 3 CARDS PER ROW
   Titles at bottom center (transparent)
======================================== */

.destinations-grid-section {
  padding-top: 80px;
  padding-bottom: 5px;
  background: #f8f9fa;
}

.cards-section-title {
  text-align: center;
  font-family: "Playfair Display", serif;
  margin-bottom: 50px;
  font-size: 2.3rem;
  color: #1a1a1a;
  font-weight: 700;
}

.destinations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card Styling */
.destination-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Image */
.destination-card img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 16 / 10;        /* You can change this later */
  object-fit: cover;
}

/* Title at bottom center - No background */
.card-title {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0px 18px;
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: white;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

/* ========================
   INDIVIDUAL CARD HEIGHTS
   ======================== */
.card-height-1  { height: 360px; }
.card-height-2  { height: 500px; }
.card-height-3  { height: 360px; }
.card-height-4  { height: 500px; }
.card-height-5  { height: 360px; }
.card-height-6  { height: 500px; }
.card-height-7  { height: 360px; }
.card-height-8  { height: 500px; }
.card-height-9  { height: 360px; }
.card-height-10 { height: 500px; }
.card-height-11 { height: 360px; }
.card-height-12 { height: 500px; }

/* Move Card 4 and Card 6 up */
.card-height-4 {
  margin-top: -140px;   /* Adjust this value if needed */
}

.card-height-6 {
  margin-top: -140px;   /* Adjust this value if needed */
}

.card-height-10 {
  margin-top: -140px;   /* Adjust this value if needed */
}

.card-height-12 {
  margin-top: -140px;   /* Adjust this value if needed */
}

/* Responsive */
@media (max-width: 992px) {
  .destinations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

@media (max-width: 576px) {
  .destinations-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .cards-section-title {
    font-size: 1.9rem;
  }
  
  .card-title {
    font-size: 1.22rem;
    padding: 6px 16px;
    bottom: 16px;
  }
}

/* ========================================
   SINGLE CARD SECTION 
   Same width and style as the grid cards
======================================== */

.single-card-section {
  padding-top: 5px;
  background: #f8f9fa;
  padding-bottom: 80px;
}

.single-card {
  max-width: 500px;
  margin: 0 75px 0 auto;
  background: white;
  overflow: hidden;
  transition: all 0.3s ease;
  background: #d4d4d4;
}

.single-card-content {
  padding: 20px 20px;
  text-align: left;
}

.single-card-content h3 {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  color: #1a1a1a;
  margin-bottom: 5px;
  font-weight: 700;
  line-height: 1.2;
}

.single-card-content p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #444;
  margin-bottom: 5px;
  font-family: "Quicksand", sans-serif;
}

.view-details-link {
  display: inline-block;
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  padding: 12px 28px;
  color: #143a74;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: underline;
}

/* Make it responsive */
@media (max-width: 768px) {
  .single-card-content {
    padding: 35px 30px;
  }

  .single-card {
    max-width: 90%;
    margin: 0 auto;           /* Centered */
  }
}
  
  .single-card-content h3 {
    font-size: 1.85rem;
  }
  
  .single-card-content p {
    font-size: 1.05rem;
  }

/* ========================================
   MOBILE: 2 CARDS PER ROW
   Same width + Individual heights
======================================== */
@media (max-width: 992px) {
  .destinations-grid {
    grid-template-columns: repeat(2, 1fr);   /* 2 cards per row */
    gap: 8px;
  }
  
  /* Keep individual heights working on tablet & mobile */
  .destination-card {
    width: 100%;           /* Ensures same width */
  }
}

@media (max-width: 576px) {
  .destinations-grid {
    grid-template-columns: repeat(2, 1fr);   /* Still 2 per row on small phones */
    gap: 6px;
  }
  
  .cards-section-title {
    font-size: 1.9rem;
  }
  
  .card-title {
    font-size: 1.15rem;
    bottom: 15px;
    padding: 0 12px;
  }
}

/* ========================================
   MOBILE RESPONSIVE - 2 CARDS PER ROW
   Titles fit inside + Individual heights + Positioning
======================================== */

@media (max-width: 992px) {
  .destinations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }

  /* Make sure titles fit properly inside cards on mobile */
  .card-title {
    font-size: 1.1rem;           /* Smaller font so it fits better */
    bottom: 15px;                /* Slightly higher from bottom */
    padding: 0 12px;
    white-space: normal;         /* Allow text to wrap if needed */
    line-height: 1.3;
    max-width: 90%;              /* Prevent title from going outside */
  }

  /* Keep individual height control working */
  .destination-card {
    width: 100%;
    height: auto;                /* Important: allow custom heights */
  }

  /* Individual card heights still work on mobile */
  .card-height-1  { height: 320px; }
  .card-height-2  { height: 440px; }
  .card-height-3  { height: 440px; }
  .card-height-4  { height: 320px; }
  .card-height-5  { height: 320px; }
  .card-height-6  { height: 440px; }
  .card-height-7  { height: 440px; }
  .card-height-8  { height: 320px; }
  .card-height-9  { height: 320px; }
  .card-height-10 { height: 440px; }
  .card-height-11 { height: 440px; }
  .card-height-12 { height: 320px; }

  /* Allow moving cards up or down individually on mobile */
  .card-height-3 { margin-top: -120px; }   /* Example: move card 4 up */
  .card-height-4 { margin-top: 0px; }   /* Example: move card 6 up */
  .card-height-6 { margin-top: 0px; }
  .card-height-7 { margin-top: -120px; }
  .card-height-8 { margin-top: 0px; }
  .card-height-10 { margin-top: 0px; }
  .card-height-12 { margin-top: 0px; }
  .card-height-11 { margin-top: -120px; }

  /* You can adjust these values as needed */
}

.hero-line11,
.hero-line21 {
  display: block;
}

.hero-line21 {
  margin-top: 10px;   /* This puts the second line below the first */
}

.hero-line11 {
  font-family: "Playfair Display", serif;
  font-size: 1em;
  letter-spacing: 2.2px;
  font-weight: 600;
  color: white;
  opacity: 0.98;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero-line21 {
  display: block;
  font-family: "Corinthia", cursive;
  font-size: .7em;
  letter-spacing: 1.5px;
  color: white;
  margin-top: 10px;
  opacity: 0.98;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* ========================================
   SMALL GROUP SAFARIS HEADER SECTION
======================================== */
.small-group-header3 {
  padding: 60px 0 40px;
  background: #eeeeee;
  text-align: center;
}

.container3 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title3 h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.8rem;
  color: #1a1a1a;
  margin-bottom: 15px;
}

.subtitle3 {
  font-size: 1.15rem;
  color: #1a1a1a;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ========================================
   TEXT LEFT + IMAGE + CAROUSEL RIGHT
======================================== */
.about-section2 {
  padding: 0px 0;
  background: #eeeeee;
  z-index: 2;
}

.about-image2 {
  position: relative;
  justify-self: end;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.container2 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-grid2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 10px;
  align-items: start;
}

/* Left Side - Text */
.about-text2 {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.about-text2 h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 10px;
  color: #1a1a1a;
}

.highlight2,
.highlight22 {
  color: #143a74;
  font-weight: 700;
}

.package-details4 {
  margin: 30px 0;
}

.package-name4 {
  font-size: 1.35rem;
  font-weight: 600;
  color: #143a74;
  margin-bottom: 20px;
}

.package-summary4 {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #1a1a1a;
  margin-bottom: 30px;
}

.detailed-info4 h4 {
  font-size: 1.25rem;
  margin: 25px 0 12px;
  color: #1a1a1a;
}

.highlights-bullets4,
.included-bullets4 {
  padding-left: 20px;
  margin-bottom: 20px;
}

.highlights-bullets4 li,
.included-bullets4 li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.accommodation-text4 {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #1a1a1a;
}

.package-price4 {
  margin: 20px 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.price4 {
  color: #1a1a1a;
}

.price-note4 {
  font-size: 1rem;
  color: #777;
  font-weight: normal;
}

.semi-private4 {
  margin-top: 10px;
}

.text-bg-imager {
  position: absolute;
  top: 160px;
  left: 0px;
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
}

.text-bg-imager img {
  width: 450px;
  height: 1000px;
}

.btn-primary2 {
  display: inline-block;
  margin-top: 5px;
  padding: 14px 32px;
  background: #000000;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.btn-primary2:hover {
  background: #ffffff;
  color: black;
  border-color: black;
  transform: translateY(-2px);
}

/* Right Side - Image + Carousel */
.about-image2 {
  position: relative;
}

.about-image2 > img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  display: block;
}

/* Carousel */
.image-side-carousel5 {
  margin-top: 14px;
  position: relative;
}

.carousel-track5 {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-top: 16px;
  overflow: hidden;
  scroll-behavior: smooth;
}

.card5 {
  min-width: 280px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: pointer;
}

.card5 img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  display: block;
}

.card-overlay5 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 15px 16px;
  background: none;
  color: white;
  text-align: center;
}

.card-overlay5 h3 {
  margin: 0 0 5px;
  font-size: 1.1rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 3px 10px rgba(0,0,0,0.65);
}

.price5 {
  font-size: 0.95rem;
  opacity: 0.95;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 3px 10px rgba(0,0,0,0.65);
}

.card-hover-overlay23 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.97);
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  overflow-y: auto;
}

.card5:hover .card-hover-overlay23 {
  opacity: 1;
  visibility: visible;
}

/* Responsive */
@media (max-width: 992px) {
  .about-grid2 {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  
  .text-bg-imager {
    display: none;
  }
}

@media (max-width: 576px) {
  .container2 {
    padding: 0 15px;
  }
  
  .about-text2 h2 {
    font-size: 2rem;
  }
}
.carousel-track5 {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-top: 16px;
  overflow-x: scroll;
  overflow-y: hidden;    /* horizontal only — never scroll this box vertically */
  scroll-behavior: smooth;
  scrollbar-width: none; /* hide native scrollbar on Firefox */
  -ms-overflow-style: none; /* hide on IE */
}

.carousel-track5::-webkit-scrollbar {
  display: none; /* hide native scrollbar on Chrome/Safari */
}

.image-side-carousel5 {
  overflow: hidden;
  position: relative;
}

.carousel-scrollbar5 {
  width: 100%;
  height: 6px;
  background: #e0e0e0;
  border-radius: 10px;
  margin-top: 16px;
  position: relative;
  cursor: pointer;
}

.carousel-scrollbar-thumb5 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: #1a3c34;
  border-radius: 10px;
  cursor: grab;
}

/* ====================== ABOUT SECTION ====================== */
.about-section {
  background: white;
  padding: 100px 40px;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Centered Title ── */
.about-text {
  text-align: center;
  margin-bottom: 0px;
  position: relative;
}

.about-text h2.title-underline {
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
  display: inline-block;
  position: relative;
}

.about-text h2.title-underline::after {
  content: '';
  display: block;
  width: 100px;
  height: 2px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
  margin: 12px auto 0;
}

/* ── Image + Paragraph side by side ── */
.about-bottom {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  width: 100%;
}

/* ── Irregular shaped image ── */
.about-image {
  flex: 1;
  min-width: 300px;
}

.about-image img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 30% 35% 35% 40% / 30% 45% 25% 30%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  display: block;
}

/* ── Paragraph on the right ── */
.about-bottom {
  flex: 1.2;
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
  line-height: 1.9;
  color: #444;
  text-align: left;
  padding-top: -20px;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .about-bottom {
    flex-direction: column;
  }

  .about-image img {
    height: 350px;
    border-radius: 50% 50% 40% 60% / 45% 55% 45% 55%;
  }
}

/* ====================== OUR STORY SECTION ====================== */
.our-story-section {
  background: white;
  padding: 20px 40px;
}

.story-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Centered Title ── */
.story-title {
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.story-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
  margin: 12px auto 0;
}

/* ── Image + Text side by side ── */
.story-content {
  display: flex;
  align-items: stretch;
  gap: 60px;
}

/* ── Left column: image grid + bottom image, stacked ── */
.story-image-column {
  flex: 1.5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ── 3 column image grid ── */
.story-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 4px solid rgb(43, 43, 43);
}

/* ── Bottom image — same width/frame as the grid; fixed height, bottom-aligned with the text column via space-between on .story-image-column ── */
.story-bottom-image {
  width: 100%;
  flex: 0 0 auto;
  height: 380px;
  margin-top: 40px;
  object-fit: cover;
  display: block;
  border: 4px solid rgb(43, 43, 43);
}

/* ── Base image style ── */
.story-image-grid img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* ── Individual image heights — adjust these freely ── */
.story-image-grid img:nth-child(1) { height: 380px; margin-top: 0px; }
.story-image-grid img:nth-child(2) { height: 320px; margin-top: 0px; }
.story-image-grid img:nth-child(3) { height: 380px; margin-top: 0px; }
.story-image-grid img:nth-child(4) { height: 320px; margin-top: 0px; }
.story-image-grid img:nth-child(5) { height: 440px; margin-top: -60px; }
.story-image-grid img:nth-child(6) { height: 320px; margin-top: 0px; }
.story-image-grid img:nth-child(7) { height: 380px; margin-top: -60px; }
.story-image-grid img:nth-child(8) { height: 320px; margin-top: 0px; }
.story-image-grid img:nth-child(9) { height: 380px; margin-top: -60px; }

/* ── Text on the right ── */
.story-text {
  flex: 1.2;
  min-width: 0;
}

.story-text p {
  font-family: "Quicksand", sans-serif;
  font-size: 1.02rem;
  line-height: 1.9;
  color: #444;
  text-align: left;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .story-content {
    flex-direction: column;
  }

  .story-image-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .story-image-grid img {
    height: 120px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .story-content {
    flex-direction: column;
  }

  .story-image-column {
    width: 95vw; /* almost full screen width */
    flex: none;
    margin: 0 0 -10px -33px;
  }

  .story-image-grid img {
    height: 240px !important; /* increase image height on mobile */
    margin-top: 0 !important;
  }

  .story-bottom-image {
    flex: none;
    width: 100%;
    height: 240px;
    margin-top: 20px;
  }
}

/* ====================== TEAM SECTION ====================== */
.team-section {
  padding: 100px 0;
  background: #ffffff;
}

.team-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

.team-title {
  font-family: "Playfair Display", serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #0e0e0e;
  text-align: center;
  margin-bottom: 20px;
}

.team-intro {
  font-size: 1.1rem;
  font-family: "Quicksand", sans-serif;
  line-height: 1.8;
  color: #383838;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 60px;
}

/* Carousel Wrapper */
.team-carousel-wrapper {
  position: relative;
  overflow: hidden;
}

/* Carousel Track */
.team-carousel {
  display: flex;
  gap: 30px;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Team Cards */
.team-card {
  min-width: 340px;
  height: 480px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  cursor: pointer;
}

.team-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.team-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.25));
}

.team-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 35px 30px 30px;
  color: white;
}

.team-card-content h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.55rem;
  margin-bottom: 12px;
}

.team-card-content .role {
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Responsive */
@media (max-width: 992px) {
  .team-card { min-width: 310px; height: 450px; }
}

@media (max-width: 768px) {
  .team-card { min-width: 280px; height: 420px; }
}

/* ========================================
   CONTACT HERO SECTION
======================================== */

.contact-hero-q {
  position: relative;
  height: 680px;                    /* Overall section height */
  overflow: hidden;
  background: #ffffff;
}

.hero-container-q {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}

/* ==================== LEFT IMAGE ==================== */
.hero-image-q {
  width: 520px;                     /* ← Change this to control width */
  height: 560px;                    /* ← Change this to control height */
  object-fit: cover;
  position: absolute;
  left: 40px;                       /* ← Move left/right */
  top: 60px;                        /* ← Move up/down */
  z-index: 1;
}

/* ==================== RIGHT IMAGE ==================== */
.hero-image-second {
  width: 680px;                     /* ← Change this to control width */
  height: 280px;                    /* ← Change this to control height */
  object-fit: cover;
  position: absolute;
  right: 40px;                      /* ← Move left/right */
  top: 250px;                        /* ← Move up/down */
  z-index: 2;
  opacity: 0.4;
}

/* ==================== TEXT OVER RIGHT IMAGE ==================== */
/* Overlay Content - Text on right image */
.overlay-content {
  position: absolute;
  top: 30px;           /* Controls how high the title and cards appear */
  left: 40%;           /* Controls how much to the left it moves */
  width: 54%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 50px;
  color: white;
  z-index: 3;
}

/* Dark overlay - you can adjust opacity */
.overlay-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* Content above overlay */
.overlay-content > * {
  position: relative;
  z-index: 3;
}

/* Title above the cards */
.contact-title {
  font-family: "Playfair Display", serif;
  font-size: 3.4rem;
  margin-bottom: 55px;
  text-align: center;
  color: rgb(19, 19, 19);
}

.cards-wrapper {
  display: flex;
  gap: 30px;
  width: 100%;
  max-width: 820px;
}

.info-card {
  background: rgba(182, 182, 182, 0.171);
  color: #1a1a1a;
  padding: 32px 28px;
  border-radius: 12px;
  flex: 1;
}

.info-card h3 {
  font-size: 1.28rem;
  margin-bottom: 20px;
  color: #111111;
}

.info-card p {
  font-size: 1.03rem;
  line-height: 1.78;
  color: #000000;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1100px) {
  .hero-image-q     { width: 460px; height: 500px; left: 30px; }
  .hero-image-second { width: 580px; height: 540px; right: 30px; }
}

@media (max-width: 992px) {
  .overlay-content {
    left: 48%;
    width: 52%;
    padding: 0 40px;
  }
}

@media (max-width: 768px) {
  .contact-hero-q {
    height: auto;
    min-height: 700px;
  }
  
  .hero-image-q,
  .hero-image-second {
    position: relative;
    width: 100%;
    height: 380px;
    left: 0;
    right: 0;
    margin: 0 auto 20px;
  }
  
  .overlay-content {
    position: relative;
    left: 0;
    width: 100%;
    height: auto;
    padding: 50px 20px;
    min-height: 400px;
  }
  
  .cards-wrapper {
    flex-direction: column;
    gap: 20px;
  }
  
  .contact-title {
    font-size: 2.6rem;
  }
}

/* ========================================
   OFFICE CONTACT SECTION
   Contact Info Left | Form Right
======================================== */

.office-contact-section {
  padding: 30px 0;
  background: #ffffff;
  max-width: 1100px;
  margin: 0 auto;
}

.office-contact-section .office-card,
.office-contact-section .contact-form {
  box-sizing: border-box;
}

/* Main Grid Layout */
.office-contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;     /* Left: Contact, Right: Form */
  gap: 80px;
  align-items: start;
}

/* Left Side - Office Contact Info */
.office-card {
  background: rgba(182, 182, 182, 0.171);
  padding: 50px 40px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.office-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.85rem;
  color: #1a1a1a;
  margin-bottom: 25px;
}

.office-card p {
  font-size: 1.08rem;
  line-height: 1.85;
  color: #1b1b1b;
}

/* Right Side - Contact Form */
.contact-form {
  background: rgba(182, 182, 182, 0.171);
  padding: 50px 40px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #141414;
  font-size: 1.02rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1a3c34;
  box-shadow: 0 0 0 3px rgba(26, 60, 52, 0.1);
}

.contact-form button {
  width: 200px;
  padding: 12px;
  background: #000000;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.1s ease;
}

.contact-form button:hover {
  background: #ffffff;
  color: black;
  border: 2px solid rgb(43, 43, 43);
}

/* Responsive */
@media (max-width: 992px) {
  .office-contact-section {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  
  .office-card,
  .contact-form {
    padding: 40px 30px;
  }
}

@media (max-width: 576px) {
  .office-contact-section {
    padding: 60px 15px;
  }
}

/* Desktop menu */
.desktop-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .desktop-menu {
    display: none !important;
  }
}

/* Circular Hamburger - Perfectly Centered Lines */
.hamburger-btn {
  width: 50px;
  height: 50px;
  background-color: #1f2937;
  border: none;
  border-radius: 9999px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
}

.hamburger-btn:hover {
  background-color: #949494;
}

.hamburger-icon {
  width: 24px;
  height: 24px;
  position: relative;
}

.line0 {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: white;
  border-radius: 3px;
  transition: all 0.4s ease;
  left: -3px;
}

/* Centered lines */
.line1 { top: 5.5px; }
.line2 { top: 11.5px; }
.line3 { top: 17.5px; }

/* Transform to X when clicked */
.hamburger-btn.active .line1 {
  top: 11.5px;
  transform: rotate(45deg);
}
.hamburger-btn.active .line2 {
  opacity: 0;
}
.hamburger-btn.active .line3 {
  top: 11.5px;
  transform: rotate(-45deg);
}

/* Mobile Menu - No scrolling + clean */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 40;
  padding-top: 90px;
  overflow: hidden;           /* Prevents scrolling */
  display: flex;
  flex-direction: column;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu a {
  display: block;
  padding: 22px 30px;
  font-family: "Playfair Display", serif;
  color: rgb(32, 32, 32);
  font-size: 1.3rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: none;
}

.mobile-menu a:hover {
  background-color: #1f2937;
}

/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 30;
}

.overlay.show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767px) {
  .hamburger-btn {
    display: flex;
  }
}

/* Mobile Menu Header - Logo at Top Right */
.mobile-menu-header {
  position: absolute;
  top: -5px;
  left: 10px;
  z-index: 10;
}

.mobile-menu-logo {
  height: 85px;        /* Adjust size as needed */
  width: auto;
  max-width: 160px;
}

/* Make sure the menu content doesn't overlap with logo */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 40;
  padding-top: 150px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Change X color to Red */
.hamburger-btn.active .line0 {
  background-color: #ff0000;   /* Red color */
}

.serengeti-hero {
  position: relative;
  width: 100%;
  height: 531px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.serengeti-hero-images {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;   /* Helps with vertical alignment */
}

.serengeti-hero-images img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
}

/* Individual image styles */
.simg-1 {
  width: 40%;           /* slightly wider for the first image */
  margin-left: -50px;
  transform: translateX(0px);
}

.simg-2 {
  width: 30%;           /* ← Reduced from 30% to 22% */
  transform: translateX(0px);
}

.simg-3 {
  width: 20%;
  transform: translateX(0px);
}

.simg-4 {
  width: 15%;
  transform: translateX(0px);
}

/* Overlay */
.serengeti-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 10, 0.45);
  z-index: 1;
}

/* Content */
.serengeti-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 1.5rem;
  text-align: center;           /* Ensures centering */
  margin-top: -40px;
}

.serengeti-hero-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  margin: 0 0 8px 0;
}

.serengeti-hero-text {
  font-family: "Corinthia", cursive;
  font-weight: 300;
  font-size: 2.5rem;
  color: #ffffff;
  max-width: 560px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  margin: 0 auto;
}



/* Serengeti Section Styles */
.serengeti-section {
  padding: 100px 0;
  background-color: #ffffff;
}

.containerr {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.gridd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: start;
}

.section-titlesere {
  font-family: "Playfair Display", serif;
  font-size: 10px;
  font-weight: 300;
  color: #000000;
  margin-bottom: 40px;
  text-align: center;
  line-height: 1.1;
}

/* Left Side */
.left-sidee {
  display: flex;
  flex-direction: column;
}

.contentsere p {
  font-size: 18px;
  font-family: "Quicksand", sans-serif;
  line-height: 1.75;
  color: #444444;
  margin-bottom: 24px;
}

.contentsere p:last-child {
  margin-bottom: 0;
}

/* Right Side */
.right-sidee {
  display: flex;
  flex-direction: column;
  margin-top: 0px;
}

.images-gridd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.image-cardd {
  width: 100%;
  aspect-ratio: 1 / 1;        /* Perfect square for circle */
  border-radius: 50%;         /* Circular frame */
  overflow: hidden;           /* Crops the image into circle */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 8px solid #f8f8f8;  /* Nice frame border */
  transition: transform 0.3s ease;
}

.image-cardd img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* Important for zoom/crop */
  object-position: center center;   /* Default center - change this to move the image */
  transition: object-position 0.4s ease, transform 0.4s ease;
  transform: scale(1.25);
}

/* First image (plains) - more zoom, centered */
.images-gridd .image-cardd:first-child img {
  transform: scale(1.1);
  object-position: 50% 45%;
}

/* Second image (migration) - less zoom, shifted */
.images-gridd .image-cardd:last-child img {
  transform: scale(2);
  object-position: 80% 50%;   /* Shifted a bit to the right */
}

/* First circular image - LARGER size */
.image-cardd-first {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 8px solid #f8f8f8;
  max-width: 380px;           /* ← Increase this number to make it bigger */
  margin: 0 auto;             /* Centers the larger circle */
}

.image-cardd-first img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.3);      
  object-position: 50% 40%;   /* Change the second number to move UP/DOWN, first number to move LEFT/RIGHT */
}

/* Second circular image - Normal size */
.image-cardd-second {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 8px solid #f8f8f8;
}

.image-card-second img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);      
  object-position: 65% 50%;   /* Change these numbers to move the image */
}

/* Responsive Design */
@media (min-width: 992px) {
  .gridd {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  
  .section-titlesere {
    text-align: left;
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  .serengeti-section {
    padding: 70px 0;
  }
  
  .section-titlesere {
    font-size: 36px;
  }
  
  .images-gridd {
    gap: 20px;
  }
  .right-sidee {
    margin-top: 40px;         /* Less shift on mobile */
  }
}

.images-gridd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  align-items: end; /* anchors both circles to the bottom so the smaller one sits lower */
}

/* First circular image - LARGER */
.image-cardd-first {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 8px solid #f8f8f8;
  max-width: 120px;       /* ← bigger than before */
  margin: 0 0 0 auto;     /* ← pushes it RIGHT instead of centering */
}

.image-cardd-first img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  object-position: 50% 40%;
}

/* Second circular image - SMALLER, overlapping */
.image-cardd-second {
  width: 200px;             /* ← reduced size */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 8px solid #f8f8f8;
  margin-left: -60px;     /* ← pulls it left to overlap the first image */
  z-index: 2;
  position: relative;
}

.image-cardd-second img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  transform: scale(1);      /* ← more zoom to fill the smaller circle */
  object-position: 10% 40%;
}

.images-gridd {
  display: grid;
  grid-template-columns: 2fr 1fr;  /* ← gives the left more room */
  gap: 25px;
  align-items: end;
}

.image-cardd-first {
  width: 420px;        /* ← use width instead of max-width */
  max-width: 620px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 8px solid #f8f8f8;
  margin: 0 0 0 auto;
}

/* Venture Content - Below the images */
.venture-content {
  margin-top: 50px;           /* Space between images and this text */
}

.venture-title {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 18px;
}

.venture-text {
  font-family: "Quicksand", sans-serif;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgb(32, 32, 32);
}

/* Viewport */
.safari-reel-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Strip */
.safari-reel-track {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: 50px;
  transition: transform 0.72s cubic-bezier(0.77, 0, 0.18, 1);
}

/* Inactive slide */
.reel-frame {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  width: 800px;
  height: 480px;
  cursor: pointer;
}

.reel-frame.active {
  width: 800px;    
  height: 480px;
}

.reel-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

/* Nav */
.reel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 36px;
}

.reel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(180, 148, 80, 0.4);
  border-radius: 50%;
  background: transparent;
  color: #143a74;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
  outline: none;
}

.reel-arrow:hover {
  background: rgba(180, 148, 80, 0.12);
  border-color: #143a74;
  transform: scale(1.08);
}

.reel-arrow:active { transform: scale(0.96); }

.reel-arrow svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reel-tally {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: #131313;
  min-width: 60px;
  text-align: center;
}

/* Gallery Label / Title */
.gallery-label {
  text-align: center;
  margin: 0 auto 50px auto;     /* Centers it and adds space below */
  padding: 0 20px;
}

.gallery-label span {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.5;
  letter-spacing: 0.03em;
  position: relative;
  display: inline-block;
}

/* Optional: Nice underline or accent */
.gallery-label span::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
}

.safari-reel-wrap,
.gallery-section {
  overflow: hidden;           /* Prevents unwanted scrollbars */
}

.reel-arrow {
  flex-shrink: 0;             /* Prevents size issues */
}

.serengeti-allure-section {
  padding: 80px 20px 60px;
  background-color: #ffffff;
}

.allure-main-title {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: center;
  margin-bottom: 32px;
}

.highlights-grid {
  max-width: 1400px;
  margin: 0 auto 0 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 40px 30px;
}

.highlight-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 60px rgba(185, 185, 185, 0.15);
}

.highlight-card img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  margin-left: 20px;
  margin-top: 20px;
}

.card-content {
  padding: 32px 100px 36px 150px;
  text-align: left;
}

.card-tag {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: #143a74;
  margin-bottom: 8px;
  font-weight: 400;
}

.card-desc {
  font-family: "Quicksand", sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #444;
  margin-bottom: 24px;
}

.card-location {
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: #777;
  margin-bottom: 28px;
}

.card-cta {
  width: 100%;
  padding: 13px 24px;
  background: #afafaf;
  color: rgb(32, 32, 32);
  border: none;
  font-family: "Quicksand", sans-serif;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.card-cta:hover {
  background: #d4d4d4;
}

.allure-main-title span::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
}

.regions-section {
  padding: 40px 20px 30px;
  position: relative;
  overflow: hidden;           /* Prevents images from spilling outside */
}

.regions-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  min-height: 450px;          /* Adjust this height as needed */
}

/* Background Images Container */
.regions-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.85;
}

/* Free positioning for each image */
.region-image {
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
}

/* === Individual Image Positioning === */
.region-1 {
  background-image: url('images/reg1.jpg');
  width: 300px;
  height: 200px;
  bottom: 5%;
  left: 2%;
  opacity: 0.7;
}

.region-2 {
  background-image: url('images/reg2.jpg');
  width: 565px;
  height: 330px;
  bottom: 0%;
  left: 28%;
  opacity: 0.7;
}

.region-3 {
  background-image: url('images/reg3.jpg');
  width: 485px;
  height: 370px;
  bottom: 0%;
  left: 66%;
  opacity: 0.7;
}

/* Content on top */
.regions-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

/* Keep your existing title and text styles */
.regions-title {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
  top: -10px;
}

.regions-title::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 3px;
  background: linear-gradient(to right, transparent, #143a74, transparent);
  top: 65px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
}

.regions-text {
  font-family: "Quicksand", sans-serif;
  font-size: 1.08rem;
  line-height: 1.78;
  color: #1b1b1b;
  padding: 15px 50px;
  border-radius: 12px;
}

.regions-text strong {
  font-weight: 700;           /* Makes it bolder */
  color: #1a1a1a;             /* Slightly darker for emphasis */
  /* Optional: you can also add underline or different color */
}

/* ═══════════════════════════════════════
   LODGES SECTION
═══════════════════════════════════════ */
.lodgeso-section {
  background: #ffffff;
  padding: 0 0 48px 0;
  overflow: hidden;
}

.lodgeso-track-wrap {
  width: 100%;
  overflow: hidden;
}

.lodgeso-track {
  display: flex;
  gap: 20px;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
  will-change: transform;
  padding-left: 5px;
  box-sizing: border-box;
}

.lodgeo-card {
  flex-shrink: 0;
  width: calc((100vw - 5px - (20px * 3)) / 4);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.lodgeo-card-top {
  background: #ffffff;
  padding: 28px 24px 24px;
  min-height: 155px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-right: 1px solid #e8e4e0;
}

.lodgeo-region {
  font-family: 'Lato', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #888880;
  margin-bottom: 16px;
  display: block;
}

.lodgeo-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 400;
  color: #0e0e0e;
  line-height: 1.3;
  margin: 0;
}

.lodgeo-card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.lodgeo-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}

.lodgeo-card:hover .lodgeo-card-image img {
  transform: scale(1.04);
}

.lodgeso-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

.lodgeso-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #aaa;
  border-radius: 50%;
  background: transparent;
  color: #555;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
  outline: none;
}

.lodgeso-arrow:hover {
  border-color: #143a74;
  transform: scale(1.08);
}

.lodgeso-arrow:active { transform: scale(0.95); }

.lodgeso-arrow svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lodgeso-tally {
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: #555;
  min-width: 50px;
  text-align: center;
}


/* ====================== NEW IMAGE SECTION - TEXT ON IMAGE ====================== */
.new-image-section {
  width: 100%;
}

.new-image-card {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.new-section-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.7;
}

.new-section-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.new-section-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 30px;
    color: white;
    text-align: left;
    max-width: 820px;
}

.new-image-card h2 {
    font-size: 20px;
    font-family: "Playfair Display", serif;
    line-height: 1.1;
    margin-bottom: 20px;
}

.new-image-card p {
    font-size: 15px;
    font-family: "Quicksand", sans-serif;
    line-height: 1.6;
    margin-bottom: 38px;
    opacity: 0.95;
}

@media (max-width: 768px) {
    .new-image-card {
        height: 720px;
    }

    .new-section-content {
        padding: 0 30px;
    }

    .new-image-card h2 {
        font-size: 32px;
    }

    .new-image-card p {
        font-size: 17px;
    }
}

.faq-section {
  background: #f2f0ed;
  padding: 30px 0 80px;
}

.faq-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px;
}

.faq-heading {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #2a2a2a;
  margin: 0 0 48px 0;
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid #d8d4cf;
}

.faq-item:last-child {
  border-bottom: 1px solid #d8d4cf;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0;
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #2a2a2a;
  text-align: left;
  letter-spacing: 0.01em;
}

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: #2a2a2a;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq-icon::before {
  width: 100%;
  height: 1.5px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.faq-icon::after {
  width: 1.5px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.faq-question[aria-expanded="true"] .faq-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-answer.open {
  max-height: 600px;
  padding-bottom: 28px;
}

.faq-answer p,
.faq-answer ul {
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  color: #444;
  line-height: 1.85;
  margin: 0 0 12px 0;
}

.faq-answer ul {
  padding-left: 20px;
}

.faq-answer ul li {
  margin-bottom: 10px;
}

.faq-answer p:last-child,
.faq-answer ul:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .faq-inner {
    padding: 0 24px;
  }

  .faq-heading {
    font-size: 1.7rem;
  }

  .faq-question {
    font-size: 0.92rem;
  }
}

/* ===== MOBILE FIX: Show only first Serengeti Defined circular image, centered ===== */
@media (max-width: 768px) {
  .images-gridd {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 24px !important;
  }
  .image-cardd-first {
    width: min(340px, 85vw) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
  .image-cardd-second {
    display: none !important;
  }
}

/* ===== MOBILE FIX: Shrink Serengeti Gallery images to fit screen ===== */
@media (max-width: 768px) {
  .reel-frame {
    width: 80vw !important;
    height: 52vw !important;
    max-height: 320px !important;
  }
  .safari-reel-track {
    margin-left: 0 !important;
    gap: 10px !important;
    padding: 0 5vw !important;
  }
}

@media (max-width: 480px) {
  .reel-frame {
    width: 85vw !important;
    height: 56vw !important;
  }
}

/* ===== MOBILE FIX: Reduce Regions of the Serengeti paragraph side padding ===== */
@media (max-width: 768px) {
  .regions-text {
    padding: 15px 16px !important;
  }
}

@media (max-width: 480px) {
  .regions-text {
    padding: 12px 12px !important;
  }
}

@media (max-width: 768px) {
  .story-content {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .story-image-column {
    display: contents !important; 
  }
  
  /* This ensures the grid, text, and bottom image keep their full original size */
  .story-image-grid, 
  .story-text, 
  .story-bottom-image {
    width: 100% !important;
  }
  
  /* 1st: The 3x3 Grid stays at the top */
  .story-image-grid {
    order: 1;
  }
  
  /* 2nd: The Our Story paragraph text goes in the middle */
  .story-text {
    order: 2;
  }
  
  /* 3rd: The bottom image moves below the text */
  .story-bottom-image {
    order: 3;
  }
}

@media (max-width: 768px) {
  /* Hide both images on mobile */
  .hero-image-q,
  .hero-image-second {
    display: none;
  }

  /* Align container and cards vertically */
  .hero-container-q,
  .overlay-content,
  .cards-wrapper,
  .office-contact-section {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* Make cards and form match full width */
  .info-card,
  .office-card,
  form,
  .contact-form,
  .form-container {
    width: 100%;
    box-sizing: border-box;
  }
}

.section-title3 .subtitle3 + h2 {
  margin-top: 40px; /* Adjust this pixel value to get your preferred spacing */
}